<template>
    <view class="new-page">
        <!-- 自定义导航栏 -->
        <view class="custom-nav-bar">
            <!-- 左侧返回按钮 -->
            <view class="left-icon" @click="goBack">
                <image src="/static/back.png" mode=""></image>
            </view>
            <!-- 中间标题 -->
            <view class="title">开单</view>
            <!-- 右侧摄像机图标按钮 -->
            <view class="right-icon" @click="goToScanPage">
                <image src="/static/paizhao.png" mode=""></image>
            </view>
        </view>

        <!-- 手动输入区域 -->
        <view class="input-area">
            <!-- 车牌号输入框 -->
            <view class="license-plate-input">
                <input 
                    id="input0" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[0]"
                    @input="handleInput(0)"
                    @focus="handleFocus(0)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 0)"
                />
                <input 
                    id="input1" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[1]"
                    @input="handleInput(1)"
                    @focus="handleFocus(1)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 1)"
                />
                <view class="dot">·</view>
                <input 
                    id="input2" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[2]"
                    @input="handleInput(2)"
                    @focus="handleFocus(2)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 2)"
                />
                <input 
                    id="input3" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[3]"
                    @input="handleInput(3)"
                    @focus="handleFocus(3)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 3)"
                />
                <input 
                    id="input4" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[4]"
                    @input="handleInput(4)"
                    @focus="handleFocus(4)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 4)"
                />
                <input 
                    id="input5" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[5]"
                    @input="handleInput(5)"
                    @focus="handleFocus(5)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 5)"
                />
                <input 
                    id="input6" 
                    type="text" 
                    maxlength="1" 
                    v-model="inputValue[6]"
                    @input="handleInput(6)"
                    @focus="handleFocus(6)"
                    @blur="handleBlur"
                    @keydown="handleKeydown($event, 6)"
                />
                <view class="new-energy-btn" @click="toggleNewEnergy">{{ newEnergy ? '普通' : '新能源' }}</view>
            </view>
            <button class="confirm-btn" @click="handleConfirm">临牌</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: ['', '', '', '', '', '', ''],
                currentFocusIndex: -1,
                newEnergy: false
            };
        },
        methods: {
            // 聚焦到指定输入框
            focusInput(index) {
                if (index >= 0 && index < 7) {
                    uni.createSelectorQuery()
                        .select(`#input${index}`)
                        .node()
                        .then((res) => {
                            res.node.focus();
                        })
                        .catch(() => {
                            console.error(`聚焦到输入框 ${index} 失败`);
                        });
                }
            },
            
            // 处理输入事件
            handleInput(index) {
                if (this.inputValue[index]) {
                    // 如果当前输入框有内容，自动跳转到下一个输入框
                    if (index < 6) {
                        this.focusInput(index + 1);
                    }
                }
            },
            
            // 处理焦点事件
            handleFocus(index) {
                this.currentFocusIndex = index;
            },
            
            // 处理失焦事件
            handleBlur() {
                // 可以在这里添加失焦时的处理逻辑
            },
            
            // 处理键盘事件
            handleKeydown(event, index) {
                // 处理删除键
                if (event.keyCode === 8 && !this.inputValue[index] && index > 0) {
                    this.focusInput(index - 1);
                }
            },
            
            // 处理确认按钮点击事件
            handleConfirm() {
                console.log('输入值:', this.inputValue.join(''));
            },
            
            // 返回上一页的方法
            goBack() {
                uni.navigateBack();
            },
            
            // 跳转到扫描页面的方法
            goToScanPage() {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            },
            
            // 切换新能源按钮状态
            toggleNewEnergy() {
                this.newEnergy = !this.newEnergy;
            }
        },
        mounted() {
            // 页面加载时聚焦第一个输入框
            this.focusInput(0);
        }
    };
</script>

<style scoped>
    .new-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #ffffff;
    }

    /* 自定义导航栏 */
    .custom-nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .left-icon,
    .right-icon {
        width: 40rpx;
        height: 40rpx;
    }

    .left-icon image,
    .right-icon image {
        width: 100%;
        height: 100%;
    }

    .title {
        font-size: 36rpx;
        font-weight: bold;
    }

    /* 手动输入区域 */
    .input-area {
        flex: 1;
        padding: 20rpx;
        margin-top: 130rpx;
    }

    .license-plate-input {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .license-plate-input input {
        width: 60rpx;
        height: 60rpx;
        text-align: center;
        border: 1px solid #007aff;
        margin-right: 10rpx;
        font-size: 32rpx;
        transition: border-color .3s;
    }

    /* 当前聚焦的输入框样式 */
    .license-plate-input input.focused {
        border-color: #007aff;
        box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
    }

    .dot {
        margin: 0 10rpx;
        color: #ccc;
    }

    .new-energy-btn {
        width: 80rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border: 1px solid #007aff;
        font-weight: 200;
        font-size: 22rpx;
    }

    .confirm-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        background: #007aff;
        color: #fff;
        font-size: 32rpx;
    }
</style>